<template>
  <div class="container">
    <div class="header">
         <van-search
            v-model="value"
            placeholder="搜索商品，共30000+款好物"
            input-align="center"
            @click="toSearch()"
          />
        
    </div>
    <!-- 主体内容区域 -->
    <div class="categoryContainer">
      <!-- 左侧导航区域 -->
      <div class="left-nav-wrap">
        <div class="left-nav">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :style="{ color: activeKey === index ? '#ab2b2b' : '' }"
              v-for="(item, index) in categoryL1List"
              :key="index"
              :title="item.name"
              @click="itemClick(item.id)"
            />
          </van-sidebar>
        </div>
      </div>

      <!-- 右侧内容列表区域 -->
      <div class="right-list">
        <cate-right :categoryId="categoryId" />
      </div>
    </div>
  </div>
</template>

<script>
import { reqCateList } from '@/axios'
import cateRight from './cateRight.vue'

export default {
  components: { cateRight },
  name: 'categoryList',
  data() {
    return {
      categoryId: 0,
      activeKey: 0, //默认选中第一个类目
      categoryL1List: [], //侧边导航的数组
      value:'',//搜索框内容
    }
  },
  mounted() {
    this.getCategoryList()
    this.itemClick(11) //默认一上来 右侧显示 “为你推荐 ”页面
  },
  methods: {
    // 获取一级分类列表
    async getCategoryList(id) {
      const result = await reqCateList(id)
      this.categoryL1List = result.data.categoryL1List
    },
    // 跳转到指定的一级分类下的二级分类
    itemClick(id) {
      this.categoryId = id
      // console.log(id)
    },
    // 点搜索栏去serach页面
    toSearch(){
    //  console.log('1111')
      this.$router.push('/search')
    },
   
  },
}
</script>

<style lang="less" scoped>
// 导航选择器组件
.van-sidebar-item {
  background-color: #fff;
  padding: 0.45rem 0.32rem;
  font-weight: 500;
  line-height: 0.3333rem;
  &::before {
    background-color: #ab2b2b;
    height: 0.8rem;
    width: 0.06rem;
  }
}
.container {
  .header {
    height: 44px;
  }
  // 主体内容区域
  .categoryContainer {
    // border-top: 2px solid #d9d9d9;
    position: relative;
    // 设置一个固定高度,移出隐藏
    height: 574px;
    // display: flex;
    overflow: auto;

    .left-nav-wrap {
      position: absolute;
      top: 0;
      width: 80px;
      height: 100%;
      overflow-x: hidden;
    }
    // 内容区域
    .right-list {
      border-left: 2px solid #d9d9d9;
      // padding: 15px;
      position: absolute;
      top: 0;
      height: 100%;
      overflow-x: hidden;
      width: calc(100% - 80px);
      left: 80px;
      box-sizing: border-box;
    }
  }
}
</style>